<template>
  <VolBox :lazy="false"
          :model.sync="model"
          title="生成场地"
          :height="400"
          :width="800"
          :padding="15"
          ref="volbox">
    <div class="from_table_box">
      <div class="header_box">
        <div class="tab">
          <div class="tab_item">场地列表11</div>
        </div>
        <!-- <div class="button_box">
          <div class="el-icon-plus button_item" @click="btnClick()">
            &nbsp;添加
          </div>
          <div class="el-icon-close button_item" @click="delClick()">
            &nbsp;删除行
          </div>
        </div> -->
      </div>
      <div class="table_box">
        <vol-table ref="table"
                   :loadKey="true"
                   :columns="columns"
                   :height="340"
                   :defaultLoadPage="false"
                   @loadBefore="loadBefore"
                   :endEditAfter="endEditAfter"
                   :row-index="true"
                   :columnIndex="true"
                   :index="true"
                   :click-edit="true"
                   :tableData="tableData"
                   :paginationHide="true"
                   :ck="false"></vol-table>
      </div>
    </div>
    <!-- <div slot="footer">
      <Button type="success"
              @click="getFirstRow">保存</Button>
      <Button type="info"
              @click="close">关闭</Button>
    </div> -->
  </VolBox>
</template>

<script>
export default {
  components: {
    VolTable: () => import("@/components/basic/VolTable.vue"),
    VolBox: () => import("@/components/basic/VolBox.vue"),
  },
  data () {
    return {
      model: false,
      url: "api/Screen/GenerateSite",
      // 商品管理表 记录
      del_list: [],
      // 商品管理表格
      tableData: [],
      columns: [
        {
          field: "site_id",
          title: "site_id",
          type: "int",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "halftime_name",
          title: "类别",
          type: "string",
          width: 100,
          align: "left",
          sortable: true,
          show: true,
        },
        {
          field: "site_code",
          title: "场地编码",
          type: "string",
          width: 120,
          align: "left",
          show: true,
        },
        {
          field: "site_name",
          title: "场地名称",
          type: "string",
          width: 100,
          align: "left",
          show: true,
          edit: { type: "true" }
        },
        {
          field: "site_interl",
          title: "预约时间间隔",
          type: "string",
          width: 100,
          align: "left",
          show: true,
          edit: { type: "number" }
        },
      ],
    };
  },
  created () {
    // this.resetSearch(); // 清空表格数据
    // this.dataTable();
  },
  methods: {
    open (mall_site) {
      this.model = true;
      console.log("选中数据", mall_site);
      // this.$refs.table.reset();
      this.tableData = mall_site;
      // this.http
      //   .get(
      //     `api/Screen/GenerateSite?Number=${row.screen_number}&Time=${row.screen_time}&IsHalf=${row.is_halftime}`
      //   )
      //   .then((result) => {
      //     console.log("添加数据", result);
      //     this.tableData = result.data;
      //   });
    },
    // 保存按钮
    getFirstRow () {
      console.log("保存", this.tableData);
      this.$parent.generateList = this.tableData;
      if (this.tableData.length < 1) {
        this.$Message.error("没有可保存的场地！");
      } else {
        this.model = false;
      }
      // let that = this.$store.getters.data().reportPrice;
      // let list = [];
      // this.tableData.forEach((item) => {
      //   if (item.check) {
      //     list.push(item);
      //   }
      // });
      // that.$refs.modelFooter.ticketTableData = list;
      // this.searchClick();
    },
    // 关闭按钮
    close () {
      this.model = false;
    },
    //点击查询时生成查询条件
    loadTableBefore (param, callBack) {
      //此处是从后台加数据前的处理，自己在此处自定义查询条件,查询数据格式自己定义或参考代码生成器查询页面请求的数据格式
      console.log("加载数据前" + param);
      //生成查询条件
      // param.wheres = [
      //   //设置为like模糊查询
      //   { name: "Name", value: this.searchFields.Name, displayType: "like" },
      //   //设置日期查询>=、<=
      //   {
      //     name: "CreateDate",
      //     value: this.searchFields.CreateDate1,
      //     displayType: "thanorequal",
      //   },
      //   {
      //     name: "CreateDate",
      //     value: this.searchFields.CreateDate2,
      //     displayType: "lessorequal",
      //   },
      // ];
      // callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
    },
    //     hdsj(){
    // console.log(23);
    //     },
    // 重置表
    resetSearch () {
      this.table_one = true;
      this.table_two = false;
      this.tableData = [];
      this.ticketTableData = [];
    },
    // 表格赋值数据
    dataTable () {
      let that = this.$store.getters.data().reportPrice;
      console.log("表格渲染", that.currentAction);
      if (that.currentAction == "Add") {
      } else if (that.currentAction == "update") {
        let params = {
          order: "desc",
          page: 1,
          rows: 100,
          sort: "id",
          value: that.rowId,
          wheres: "[]",
        };
        this.http
          .post("/api/PackageProducts/getDetailPage", params)
          .then((res) => {
            if (res.rows) {
              // this.$set(this.tableData,res.rows)
              // this.tableData = res.rows.concat();
              this.tableData = res.rows;
              console.log("从表数据1", this.tableData);
              // this.$refs.自定义的名字.load(params,true)
              // this.$set(vm.items, indexOfItem, newValue)
              that.del_list = [];
              res.rows.forEach((item) => {
                that.del_list.push(item);
              });
            }
          });
        this.http
          .post("/api/PackageProducts/GetDetailPackagePage", params)
          .then((res) => {
            this.ticketTableData = res.data.rows;
            console.log("从表数据2", this.ticketTableData);
          });
      }
    },
    // tab切换
    tabClick (num) {
      if (num == 1) {
        this.table_one = true;
        this.table_two = false;
      } else if (num == 2) {
        this.table_one = false;
        this.table_two = true;
      } else {
        this.table_one = true;
        this.table_two = false;
      }
    },
    // 添加按钮
    btnClick (type) {
      let that = this.$store.getters.data().reportPrice;
      this.$refs.table.addRow();
    },
    // 删除按钮
    delClick (type) {
      if (type) {
        this.$refs.table_one.delRows();
      } else {
        this.$refs.table_two.delRows();
      }
    },
    loadBefore (params, callback) {
      //设置查询 条件
      console.log("aaa", params);
      // var _row;
      // //获取主表选中的行
      // this.$emit("parentCall", ($vue) => {
      //   var rows = $vue.getSelectRows();
      //   if (rows.length) {
      //     _row = rows;
      //   }
      // });
      // if (!_row) {
      //   //取消选中，清空明细
      //   return (this.$refs.tableList.rowData.length = 0);
      //   //  return this.$Message.error("请选中主表行数据");
      // }

      // //设置查询条件，用主表id加载明细表数据(如果是自己定义的接口，这里条件自己处理)
      // params.value = _row.Order_Id;
      // //设置排序字段(如果是自己定义的接口，排序字段不一定填写)
      // if (!params.sort) {
      //   params.sort = "CreateDate";
      // }
      return callback(true);
    },
    endEditAfter (row) {
      //结束编辑时，可以直接调用后台的代码进行保存
      console.log(row);
      return true;
    },
    save (row) {
      //保存
      this.$Message.info("保存");
    },
    del (row) {
      this.$confirm(
        "确认要删除此行数据【" + row.ProductName + "】？？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认删除",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "提交删除请求",
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "放弃删除" : "停留在当前页面",
          });
        });
    },
    getRender () {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: (e) => {
                  e.stopPropagation();
                  this.del(row);
                },
              },
            },
            "删除1"
          ),
          h(
            "a",
            {
              props: {},
              style: { "margin-left": "9px", "border-bottom": "1px solid" },
              on: {
                click: (e) => {
                  e.stopPropagation();
                  this.$refs.tableList.edit.rowIndex = index;
                },
              },
            },
            "编辑"
          ),
          h(
            "a",
            {
              props: {},
              style: { "margin-left": "9px", "border-bottom": "1px solid" },
              on: {
                click: (e) => {
                  e.stopPropagation();
                  //强制结束编辑
                  this.$refs.tableList.edit.rowIndex = -1;
                  this.save();
                },
              },
            },
            "保存"
          ),
        ]);
      };
    },
  },
};
</script>
<style lang="less" scoped>
.from_table_box {
  background: white;
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 3px 15px;
    .tab {
      display: flex;

      .tab_item {
        line-height: 28px;
        font-size: 14px;
        margin-bottom: 0;
        color: #828282;
        padding: 0 8px;
        font-weight: bolder;
        border-bottom: 2px solid #03a9f4;
      }
    }
    .button_box {
      display: flex;
      margin-right: 12px;
      .button_item {
        margin-left: 19px;
        line-height: 28px;
        border: 0px;
        color: #009688;
        &.button_item:hover {
          cursor: pointer;
          color: #ff9800;
          border-color: #ff9800;
          border: none;
        }
      }
    }
  }
}
</style>